import React, { useEffect, useState, useRef } from "react";
import { Input } from 'antd';
import {BaseChart, MapChart} from "react-big-screen-template"


export default function Test(props) {

    const chartOption = {
        animation: false,
        title: {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            left: 'center'
        },
        tooltip: {
            show: true,
            confine: false, //是否将 tooltip 框限制在图表的区域内
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color : [ "#0091f4", "#5dd5a5", "#eac616", "#e98c51", "green" ],
        legend: {
            selectedMode: false,//取消图例上的点击事件
            show : true,
            orient: 'vertical',
            left: 'left',
            itemWidth : 20,
            itemHeight : 15,
            itemGap : 10,
            textStyle : {
                color : '#333333'
            },
        },
        grid : {
            x : '0%',
            y : '15%',
            x2 : '0%',
            y2 : '5%'
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '50%',
                center : [ '50%', '50%' ],  //饼图的中心（圆心）坐标
                minAngle : 5,   //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
                avoidLabelOverlap : true,   //是否启用防止标签重叠策略，默认开启
                data: [
                    {value: 1048, name: '搜索引擎'},
                    {value: 735, name: '直接访问'},
                    {value: 580, name: '邮件营销'},
                    {value: 484, name: '联盟广告'},
                    {value: 300, name: '视频广告'}
                ],
                //label:饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
                label : {
                    normal : {
                        show : false,
                        position : 'outside'
                    },
                    emphasis : {
                        show : true,
                        formatter : "{b}\n{d}%",
                        textStyle : {
                            fontSize : '15',
                            fontWeight : 'bold',
                        }
                    }
                },
                //labelLine：标签的视觉引导线配置。在 label 位置 设置为'outside'的时候会显示视觉引导线
                labelLine : {
                    normal : {
                        show : true
                    }
                },
                //emphasis:高亮状态配置
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    const { TextArea } = Input;
    const [option, setOption] = useState(chartOption);

    useEffect(() => {

    }, []);

    const changeVal = (e) => {
        setOption(JSON.parse(e.target.value));
    };
    return (
        <div>
            <BaseChart option={option} width={400} height={400}/>
            <TextArea autoSize={true} value={JSON.stringify(option)} onChange={(e)=>changeVal(e)} />
        </div>
    );
}